<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> -->
  <title>檀木高精度定位</title>
  <!-- #leftPane {position:absolute; width:20%; height:100%; top:0; left: 0; background: #4d4042;} -->
  <style>
    html, body {width:  100%; height: 100%; margin: 0px; background: #FFFFFF; font-family: Tahoma, Geneva, Arial, sans-serif;}
    /*#header {position: fixed; width: 30%; height: 70px; background: #00487f; color: white; vertical-align: middle;line-height: 70px}*/
    /*#header-2 {position: fixed;top:0px; left: 180px; background: #00487f; width: 80%; height: 40px; color: white; vertical-align: middle;line-height: 70px}*/
    #container {position: fixed; width: 100%; top:0px; bottom: 35px; overflow: auto;}
    #footer {position: fixed; width: 100%; height: 35px; bottom: 0px; background: #fff; color: white;}

    #mapSwitcher {position:absolute; width: 100%; padding-left: 50%;}
    #tagContainer {position:absolute; width:100%; height:100%; top:0; left: 0; background: #111111; overflow-y:scroll;}
    #mapContainer {position:absolute; top:0; right:0; width:100%; height:100%;}
    #show2DMap {position: absolute; bottom: 10px; left: 10px; }
    #show3DMap {position: absolute; bottom: 10px; left: 90px; }
    .mapSwitcherButton {border-radius:5px; border-width:1px; width: 70px; border-color: #FFFFFF;}
    .mapPanel {position:absolute; width:100%; height:100%;}
    .mapPanel1 {position:absolute; width:100%; height:100%;}
    canvas { width: 100%; height: 100% }
    #zoomIn {position: absolute; top: 5px; left: 5px; }
    #zoomOut {position: absolute; top: 55px; left: 5px; }
    #rotateCW {position: absolute; top: 5px; left: 55px; }
    #rotateCCW {position: absolute; top: 55px; left: 55px; }
    #drawer { top: 50%; left: 0px; }
    #LogoSlogan {position: absolute; bottom: 10px; right: 10px; opacity: 0.2; height:150px;}
    .inputContainer {position: absolute; padding:3px; margin: 3px; width: 200px; height: 20px; -webkit-border-radius:4px;
      -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
      box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; background: #f8f8f8; border:none; outline:none;}

    #tagIDFilter { left: 210px; }
    #tagFieldFilter { left: 420px; }
    #positionOptimize {position: absolute; right: 30px; padding:3px; margin: 3px; height: 30px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; background: #f8f8f8; border:1px solid #aaa; outline:none;}
    #tagSortButton {position: absolute; left: 630px; padding:3px; margin: 3px; height: 30px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; background: #f8f8f8; border:1px solid #aaa; outline:none;}
    #coordSysContainer {  }
    #coordSysSelect { position: absolute; right: 2px; border:none; outline:none; background: inherit; width: 80%; cursor:pointer;}


    #notificationBar {position: absolute; top: 90%; left: 0px; width: 100%; height: 40px; background: rgba(255,0,0,0.1); color:white; text-align: center; line-height: 35px; display:none; font-size:25px}
    #alarmBox_1 {position: absolute; top: 0; right: 0px; width: 25%; height: 0px; background: rgba(255,0,0,0.9); color:white; text-align: center; line-height: 25px; display:none; font-size:20px}
    #alarmBox_2 {position: absolute; top: 80px; right: 0px; width: 25%; height: 0px; background: rgba(255,120,0,0.9); color:white; text-align: center; line-height: 25px; display:none; font-size:20px}
    #AlarmBox_3 {position: absolute; top: 160px; right: 0px; width: 25%; height: 0px; background: rgba(255,0,0,0.9); color:white; text-align: center; line-height: 25px; display:none; font-size:20px}

    .tagRow {color: white; padding: 3px 3px 3px 5px; }
    .tagLabel {color: #aaaaaa; font-weight:bold;}
    .tagInfoRow {background: #444; margin-left: 5px; padding-left: 5px; border-left-color: #00CCFF; border-width: 0px 0px 0px 5px; border-style: solid;}
    .tagLocationRow {background: #444; margin-left: 5px; padding-left: 5px; border-left-color: #77DD77; border-width: 0px 0px 0px 5px; border-style: solid;}
    .colorbox { float: left; width: 13px; height: 13px; background: red; margin: 2px 5px 0px 0px;
      border-radius: 50%;  border-width: 2px; border-style: solid; /* animation: border-pulsate 2s infinite; */}

    #buttons {position:absolute; width: 100%; text-align:center; z-index:1000;}
    button { font-family:georgia; background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:5px; border-width:1px; border-color: #FFFFFF; z-index:1000; }
    button:hover { background:#333 }
    button.selected { background:#333 }

    #mapPanel canvas {
      -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
      -moz-animation: fadein 2s; /* Firefox < 16 */
      -ms-animation: fadein 2s; /* Internet Explorer */
      -o-animation: fadein 2s; /* Opera < 12.1 */
      animation: fadein 2s;
    }
    #mapPanel1 canvas {
      -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
      -moz-animation: fadein 2s; /* Firefox < 16 */
      -ms-animation: fadein 2s; /* Internet Explorer */
      -o-animation: fadein 2s; /* Opera < 12.1 */
      animation: fadein 2s;
    }
    @keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

  </style>
  <!--可无视 弹框样式-->
<!--  <link rel="stylesheet" type="text/css" href="/css/alert/normalize.css" />-->
<!--  <link rel="stylesheet" type="text/css" href="/css/alert/reset.css">-->
  <!--核心样式-->
  <link rel="stylesheet" type="text/css" href="/css/alert/style.css"/>

</head>
<body>
<!--<div id='header'>-->
<!--  <a style="font-size: 38px; "><img  th:src="@{/img/images/white_tm.png}" style="height:65px; margin:3px;"></img></a>-->
<!--</div>-->
<!--<div id='header-2'>-->
<!--  <a style="font-size: 38px; ">&nbsp;&nbsp;&nbsp;&nbsp;高精度定位演示平台</a>-->
<!--</div>-->
<div id="container" style="background: #FFFFFF">
  <div id="leftPane" style="display: none">
    <div id="tagContainer"></div>
  </div>

  <div id="mapContainer">
    <div id="mapPanel" class="mapPanel"></div>
    <img id="LogoSlogan"  th:src="@{/img/images/white_tm.png}" style="height: 105px"></img>
    <img id="zoomIn"  th:src="@{/img/images/zoomInButton.png}"></img>
    <img id="zoomOut"  th:src="@{/img/images/zoomOutButton.png}"></img>
    <img id="rotateCW"  th:src="@{/img/images/rotateCWButton.png}"></img>
    <img id="rotateCCW"  th:src="@{/img/images/rotateCCWButton.png}"></img>
    <img id="drawer" th:src="@{/img/images/drawerHandle.png}" style="display: none"></img>
    <img id="people" th:src="@{/img/images/people-2.png}" style="display: none"></img>
    <img id="people3" th:src="@{/img/images/people-4.png}" style="display: none"></img>
    <div id="notificationBar"></div>
    <div id="alarmBox_1"></div>
    <div id="alarmBox_2"></div>
    <div id="AlarmBox_3"></div>
<!--    <button id="show2DMap" class="mapSwitcherButton"><img  th:src="@{/img/images/2DIcon.png}"></img></button>-->
<!--    <button id="show3DMap" class="mapSwitcherButton"><img th:src="@{/img/images/3DIcon.png}"> </img></button>-->
  </div>
</div>

<div id="footer" style="left: 20px;display: none">
<!--  <div id="coordSysContainer" class="inputContainer">-->
<!--  <img  th:src="@{/img/images/coordinateSystemIcon.png}"/>-->
<!--  <select id="coordSysSelect">-->
<!--  </select>-->
<!--</div>-->
  <div class="inputContainer">
    <span style="color: black">条件：</span>
    <select id="selectCondition" style="width: 73%;height: 22px;">
        <option value="0">标签ID</option>
        <option value="1">人员姓名</option>
        <option value="2">所属组织</option>
    </select>
  </div>

  <input id="tagIDFilter" type="text" placeholder="请输入" class="inputContainer"></input>
  <input id="tagFieldFilter" type="hidden" placeholder="筛选标签组" class="inputContainer"></input>
  <input id="tagSortButton" type="button" value="排列" style="visibility: hidden;" />
  <input id="positionOptimize" type="button" value="轨迹优化:ON " style="color: rgb(0,0,0); font-weight: bold;background: rgb(25,255,25);"/>
<!--  <input id="tagId" type="hidden" th:value="${tagId}" class="inputContainer"></input>-->
  <input id="tagPositiont" type="hidden" th:value="${tagPositiont}" class="inputContainer"></input>
</div>
<script th:src="@{/js/config.js}"></script>
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<!--<script src="../static/js/map/lib/jquery-1.8.3.js" th:src="@{/js/map/lib/jquery-1.8.3.js}"></script>-->
<!--<script src="../static/js/map/lib/jquery-1.8.3.js" th:src="@{/js/map/lib/jquery-1.8.3.js}"></script>-->
<script src="../static/js/map/lib/jquery.mousewheel.js" th:src="@{/js/map/lib/jquery.mousewheel.js}"></script>
<script src="../static/js/map/lib/Three-r75.js" th:src="@{/js/map/lib/Three-r75.js}"></script>
<script src="../static/js/map/lib/dat.gui.min.js" th:src="@{/js/map/lib/dat.gui.min.js}"></script>
<script src="../static/js/map/settings.js" th:src="@{/js/map/settings.js}"></script>
<script src="../static/js/map/map2D/Map2DInteractionManager.js" th:src="@{/js/map/map2D/Map2DInteractionManager.js}"></script>
<script src="../static/js/map/SelectionManager.js" th:src="@{/js/map/SelectionManager.js}"></script>
<script src="../static/js/map/NotificationManager.js" th:src="@{/js/map/NotificationManager.js}"></script>
<script src="../static/js/map/filtering/TagFilter.js" th:src="@{/js/map/filtering/TagFilter.js}"></script>
<script src="../static/js/map/filtering/KeywordTagFilter.js" th:src="@{/js/map/filtering/KeywordTagFilter.js}"></script>
<script src="../static/js/map/filtering/CoordinateSystemTagFilter.js" th:src="@{/js/map/filtering/CoordinateSystemTagFilter.js}"></script>
<script src="../static/js/map/map2D/Map2DController.js" th:src="@{/js/map/map2D/Map2DController.js}"></script>
<script src="../static/js/map/map3D/Map3DController.js" th:src="@{/js/map/map3D/Map3DController.js}"></script>
<script src="../static/js/map/TreeController.js" th:src="@{/js/map/TreeController.js}"></script>
<script src="../static/js/map/map2D/Viewport.js" th:src="@{/js/map/map2D/Viewport.js}"></script>
<script src="../static/js/map/map2D/GridDrawable.js" th:src="@{/js/map/map2D/GridDrawable.js}"></script>
<script src="../static/js/map/map2D/PolygonDrawable.js" th:src="@{/js/map/map2D/PolygonDrawable.js}"></script>
<script src="../static/js/map/map2D/TagDrawable.js" th:src="@{/js/map/map2D/TagDrawable.js}"></script>
<script src="../static/js/map/map2D/BackgroundImageDrawable.js" th:src="@{/js/map/map2D/BackgroundImageDrawable.js}"></script>
<script src="../static/js/map/map2D/InactiveAreaRendererDrawable.js" th:src="@{/js/map/map2D/InactiveAreaRendererDrawable.js}"></script>
<script src="../static/js/map/map3D/DomeControls.js" th:src="@{/js/map/map3D/DomeControls.js}"></script>
<script src="../static/js/map/map3D/Stats.js" th:src="@{/js//map/map3D/Stats.js}"></script>
<script src="../static/js/map/TagDataRetrieverLocation.js" th:src="@{/js/map/TagDataRetrieverLocation.js}"></script>
<script src="../static/js/map/main.js" th:src="@{/js//map/main.js}"></script>
<script src="../static/js/map/map2D/Map2D.js" th:src="@{/js/map/map2D/Map2D.js}"></script>
<script src="../static/js/map/alert/jquery-translucent.js" th:src="@{/js/map/alert/jquery-translucent.js}"></script>
<script>
  $(document).ready(main);
  function openPersonInfo(tag) {
    var tagId = tag.id;
    var url = "/system/lable/getPersonInfoByTagId?tagId="+tagId;
    var config = {
      url: url,
      type: "post",
      dataType: "json",
      data: "",
      success: function(result) {
        var data = result.data;
        var sex = "";
        if (data.sex!=null&&data.sex!=""){
          sex = data.sex;
        }
        var sexName= "";
        if (sex!=null&&sex!=""){
          if (sex==0){
            sexName='男';
          } else if (sex==1){
            sexName='女';
          }
        }
        var personId = "";
        var personName="";
        var certificateNumber="";
        var deptName = "";
        if (data.personId!=null&&data.personId!=""){
          personId = data.personId;
        }
        if (data.personName!=null&&data.personName!=""){
          personName = data.personName;
        }
        if (data.certificateNumber!=null&&data.certificateNumber!=""){
          certificateNumber = data.certificateNumber;
        }
        if (data.deptName!=null&&data.deptName!=""){
          deptName = data.deptName;
        }
        var  html ="<ul align='left' style='padding-left: 20px;color: black'><li><a>人员编号：</a>"+personId+"</li><li><a>姓名：</a>"+personName+"</li><li><a>性别：</a>"+sexName+"</li><li><a>身份证：</a>"+certificateNumber+"</li><li><a>所属组织：</a>"+deptName+"</li></ul>";
        $("body").translucent({
          titleGroundColor:"#5396BA",
          backgroundColor:"#ffffff",
          titleFontColor:"#ffffff",
          titleFontSize:14,
          opacity:1,
          zIndex:100,
          textHtml:html,
          close:function ($dom) {
            // $.model.alert("确定要关闭吗？")
          }
        });
      }
    };
    $.ajax(config)

  }
</script>

</body>
</html>
